<template>
  <div class="ques">
    <div class="ques-body">
      <div class="ques-body-question">
        <div class="ques-body-question-title">题目</div>
        <div class="ques-body-question-content">
          <div class="ques-body-question-content-up">
            <a-textarea
              placeholder="Autosize height based on content lines"
              v-model="activityMessage.node_contents[0].title"
              :rows="4"
            />
          </div>
          <div class="ques-body-question-content-down">
            <div class="ques-body-question-content-down-a">
              <label class="ques-body-question-content-down-a-l"
                >正确答案</label
              >
            </div>
            <div class="ques-body-question-content-down-b">
              <!-- <a-select
                placeholder="请输入正确答案"
                style="width: 200px"
                v-model="activityMessage.node_contents[0].right_answer"
              >
                <a-select-option
                  v-for="(option, index) in activityMessage.node_contents[0]
                    .options"
                  :key="index"
                  :value="ENG_CHARS[index]"
                >
                  {{ ENG_CHARS[index] }}
                </a-select-option>
              </a-select> -->
              <div style="display: flex;">
                <div 
                  v-for="(option, index) in activityMessage.node_contents[0].options"
                  :key="index"
                  :value="option"
                  @change="checkItem(index)"
                  class="checkboxBorder"
                >
                  <checkBoxInput :index="index"></checkBoxInput>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ques-body-options">
        <div class="ques-body-options-title">
          <!-- <div class="ques-body-options-title-label">
            请添加回答选项</div> -->
          <div class="ques-body-options-title-add">
            <button
              class="ques-body-options-title-add-btn"
              @click="activityMessage.node_contents[0].options.push('')"
            >
              请添加回答选项
            </button>
          </div>
        </div>
        <div class="ques-body-options-content">
          <div class="ques-body-options-content-item">
            <a-input
              v-for="(option, index) in activityMessage.node_contents[0]
                .options"
              :key="index"
              class="ques-body-options-content-item-options"
              v-model="activityMessage.node_contents[0].options[index]"
            >
              <template #prefix>
                <button class="ques-body-options-content-item-btn">
                  {{ ENG_CHARS[index] }}
                </button>
              </template>
              <template #suffix>
                <a-icon type="close" @click="closeOption(index)"></a-icon>
              </template>
            </a-input>
          </div>

          <!-- <div class="ques-body-options-content-right">
            
          </div>
          <div class="ques-body-options-content-action">
            
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EditorW from "wangeditor";
import { mapState, mapGetters } from "vuex";
import checkBoxInput from "../../../checkBoxInput.vue";

export default {
  props: {
    activityMessage: Object,
  },
  components: {
    checkBoxInput,
  },
  data() {
    const ENG_CHARS = [
      "A",
      "B",
      "C",
      "D",
      "E",
      "F",
      "G",
      "H",
      "I",
      "J",
      "K",
      "L",
      "M",
      "N",
    ];
    const MAX_OPTIONS = ENG_CHARS.length;
    return {
      answer: [],
      ENG_CHARS,
      MAX_OPTIONS,
      rightanswer: "",
    };
  },
  computed: {
    ...mapGetters({
      getCompete: "teacher/getCompete",
    }),
  },
  methods: {
    closeOption(index) {
      if (this.activityMessage.node_contents[0].options.length <= 2) {
        this.$message.info("选项不能少于两个！");
        return null;
      }
      this.activityMessage.node_contents[0].options.splice(index, 1);
    },
    checkItem(index) {
      let box = document.getElementsByClassName("checkboxInput");
      if(box[index].checked == true) {
        this.activityMessage.node_contents[0].right_answer = this.activityMessage.node_contents[0].right_answer + this.ENG_CHARS[index];
        
      } else {
        this.activityMessage.node_contents[0].right_answer = this.activityMessage.node_contents[0].right_answer.replace(this.ENG_CHARS[index], "");
      }
      let len = this.activityMessage.node_contents[0].right_answer.length;
      this.activityMessage.node_contents[0].question_type = len === 1 ? 2 : 3;
    },
  },
  mounted() {
    // this.cards = {
    //   title: this.getCompete.title,
    //   options: this.getCompete.options,
    // };
    // this.ifshow = this.getCompete.ifshow;
    // this.rightanswer = this.getCompete.rightanswer;
    // if (this.ifshow === 3) {
    //   this.answer = Array.from(this.rightanswer);
    // }
  },
};
</script>

<style lang="scss">
.ant-input-affix-wrapper .ant-input-prefix {
  left: 0;
}

.checkboxBorder {
  display: flex;
  margin-right: 20px;
}
</style>
